<template>
	<view class="header">
		<view class="u-flex-nowrap u-row-between u-flex page-font" style="margin-left: 20rpx;">
			<view class="u-flex">请输入工单编号/扫码</view>
		</view>
		<view class="u-flex-nowrap u-row-around u-flex page-font">
			<u-form class="u-flex u-flex-nowrap u-row-around">
				<u-form-item>
					<u-input v-model="scanResult" :type="type" height=50 input-align="center" placeholder="请输入工单编号/扫码" clearable />
				</u-form-item>
				<view class="inputTips">提示：工单编号例如:5103-2207010105</view>
				<u-form-item class="u-flex u-row-center">
					<u-button size="medium" type="success" @click="getData">查询</u-button>
				</u-form-item>
			</u-form>
			<view class="u-flex-nowrap u-flex-col u-row-center u-col-center" @click="scanFun">
				<u-icon name="scan" color="#2979ff" size="100"></u-icon>
				<view class="$u-type-primary">点击扫码</view>
			</view>
		</view>
		<u-sticky :offset-top="0">
			<view style="background: #FFFFFF;">
				<u-form class="u-flex u-flex-nowrap u-row-center">
					<u-form-item label="排产序号" label-width="160" class="u-flex u-row-around">
						<u-input type="select" v-model="planNo" @click="show = true" placeholder="请选择排产序号" />
						<u-picker v-model="show" mode="selector" :default-selector="[0]" :range="typePlano" @confirm="confirm"></u-picker>
					</u-form-item>
				</u-form>
			</view>
		</u-sticky>
		<view class="list-item-wrapper" v-bind:id="index" v-for="(item,index) in List" :key="index">
			<view class="list-item">
				<view>工序名称</view>
				<view>{{item.processName}}</view>
			</view>
			<view class="list-item">
				<view>加工顺序</view>
				<view>{{item.processSerial}}</view>
			</view>
			<view class="list-item">
				<view>排产序号</view>
				<text selectable="true">{{item.planNo}}</text>
			</view>
			<view class="list-item">
				<view>计划批号</view>
				<text selectable="true">{{item.orderPlanNo}}</text>
			</view>
			<view class="list-item">
				<view>品号</view>
				<text selectable="true">{{item.technologyNo}}</text>
			</view>
			<view class="list-item">
				<view>元件编码</view>
				<text selectable="true">{{item.component}}</text>
			</view>
			<view class="list-item">
				<view>生产进度</view>
				<view class="u-flex item-progress">
					<u-line-progress style="width: 380rpx" active-color="#19be6b" :percent="item.percent" :striped="true" :striped-active="true" :show-percent="false"></u-line-progress>
					<text>{{item.percent}}%</text>
				</view>
			</view>
			<view class="list-item" style="justify-content:flex-end;">
				<view>{{item.mesCompletionQuantity}}/{{item.predictOutput}}</view>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
import { findSchedule } from '../utils/index.js'
		export default {
			data() {
				return {
					show: false,
					scanResult: '',		//条形码包含的字符串信息
					List: [],
					listQuery: {
						workOrderNo: '',			//单号
						orderType: ''				//单别
					},
					typePlano: [],
					planNo: ''
				}
			},
			methods: {
				// 点击按钮，启用扫码函数
				scanFun() {
					let that = this
					uni.scanCode({
						onlyFromCamera: true,							//扫码只能通过相机，不可在手机相册获得二维码
						success: function (res) {
							that.scanResult = that.handleString(res.result)				//将扫码获得的内容赋值给scanResult
							that.getData()								
						},
						fail() {
							console.log('识别失败')
						}
					})
				},
				confirm(val){
					let index = val[0]
					this.planNo = this.typePlano[index]
					this.List = this.dataList[index]
				},
				// 获取工单完成进度
				async getSchedule() {
					const query = Object.assign({},this.listQuery)
					const {data} = await findSchedule(query)
					console.log(data)
					const errMsg = data.msg
					if(data.code == '1'){
						if(!data.data.length) return this.$refs.uTips.show({
							title: '暂无数据',
							type: 'warning',
							duration: '2000'
						})
						let typePlanos = []
						data.data.forEach((item) => {
							typePlanos.push(item[0].planNo)
							item.forEach(item=>{
								item.predictOutput = parseFloat(item.predictOutput).toFixed(0)
								item.percent = ((item.mesCompletionQuantity/item.predictOutput)*100).toFixed(2)
							})
						})
						this.List = data.data[0]
						this.dataList = data.data
						this.typePlano = typePlanos
						this.planNo = this.typePlano[0]
						this.$refs.uTips.show({
							title: errMsg,
							type: 'success',
							duration: '2000'
						})
					} else {
						this.$refs.uTips.show({
							title: errMsg,
							type: 'warning',
							duration: '2000'
						})
					}
				},
				handleString(value){
					let param = value.split('-')
					return param[0] + '-' + param[1]
				},
				getData(){
					if(!this.scanResult) return this.$refs.uTips.show({
						title: '请输入工单编号',
						type: 'warning',
						duration: '2000'
					})
					let param = this.scanResult.split('-')
					this.listQuery.orderType = param[0]
					this.listQuery.workOrderNo = param[1]
					this.getSchedule()
				}
			},
			// 在进入页面
			onLoad() {
			},
			// 下拉获取
			onPullDownRefresh() {
			},
		}
</script>

<style>
	.page-font {
		font-size: 40rpx;
	}
	// 排产返回的列表信息块外层包裹器
	.list-item-wrapper {
		margin: 30rpx;
		background-color: #FFEFD5;
		padding: 20rpx;
		border-radius: 20rpx;
	}
	// 排产返回的列表信息块的样式
	.list-item {
		display: flex;
		justify-content: space-between;
		font-size: 16px;
		margin: 10rpx 10rpx;
	}
	.item-progress text{
		font-size: 26rpx;
		margin-left: 10rpx;
	}
	.inputTips{
		font-size: 18rpx;
		color: #F56C6C;
	}
</style>
